<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="all" href="css/code/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/code/960.css" />
<link href="css/custom-theme/jquery-ui-1.8.22.custom.css" type="text/css" rel="stylesheet">
<link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href='http://fonts.googleapis.com/css?family=Bad+Script&subset=cyrillic' rel='stylesheet' type='text/css'>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> 
<script src="js/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<title>StarKuz Mobile - бесплатный онлайн-сервис по созданию мобильных сайтов</title>

<script>
	$(document).ready(function() {
		
		<!-- начальные значения шаблона --> 
		
		var count = 0;
		var skm = 'Сайт создан на сервисе StarKuz Mobile';
		var titleTemp = 'Заголовок';
		var copyTemp = 'Copyright 2012 Имя Компании';
		var conTit = 'Заголовок контента';
		var conCont = 'Наполнение контента..... Наполнение контента..... Наполнение контента..... Наполнение контента.....';
		
		$('#starkuzMobile').html('<p>' + skm + '</p>');
		$('#editTitle').html('<h3>' + titleTemp + '</h3>');
		$('#editFooter').html('<h5>' + copyTemp + '</h5>');
		$('#accordTit'+count).html('<h3>' + conTit + '</h3>');
		$('#accordCont'+count).html('<img src="img/starkuz.jpg"><p>' + conCont + '</p>');

<!------------------------------------------------------------------------------------------------------>
		
		<!-- панель управления --> 
		
		$( "#panel" ).accordion({
			active: false,
			autoHeight: false,
			navigation: true
		});

<!------------------------------------------------------------------------------------------------------>
		
		<!--  скрываю/раскрываю элементы контента -->
		$('.accordCont_val').hide();
		
		$(document).on('click', '.accordTit_val', function(){
			 $(this).next().toggle();
			 
		});
		
		$( "#deleteElem" ).hide();

<!------------------------------------------------------------------------------------------------------>
		<!--  добавляю элементы контента -->
		$('#addBtn').click(function() {
			count++;
			
			$('#accordion').append('<div id="accordElem' + count + '"><div id="accordTit' + count + '" class="accordTit_val"><h3>' + conTit + '</h3></div><div id="accordCont' + count + '" class="accordCont_val"><p>' + conCont + '</p></div><div id="deleteBtn' + count + '" class="deleteBtn"><img src="img/delete-button.png"></div></div>');
			
			<!--  персональная кнопка удаления элемента -->
			$('#deleteBtn'+ count).click(function() {
				
				hideElem = $(this).parent('div');
				
				$( "#deleteElem" ).dialog({
						height: 120,
						width: 285,
						title: 'Удалить выбранный элемент?',
						modal: true,
						buttons: {
							'Удалить': function() {
								hideElem.hide();
								$( "#deleteElem" ).dialog("close");
							},
							'Отмена': function() {
								$( "#deleteElem" ).dialog("close");
							}
						}
				});
				
			});
			
			
			<!--  добавляю стили шаблона к новым элементам контента -->
			$('#accordElem' + count).css(
				{
					'background-color' : '#dbdbdb',
					'position' : 'relative',
					'margin-top' : '10px'
				}
			);
			
			$('#accordTit' + count).css(
				{
					'height' : '30px',
					'cursor' : 'pointer'
				}
			);
			
			$('#accordTit' + count + ' h3' ).css(
				{
					'color' : '#fff',
					'font-weight' : 'bold',
					'text-shadow' : '0 -1px 1px #000',
					'text-align' : 'left',
					'background-color' : '#5a91bf',
					'width' : '250px',
					'height' : '35px',
					'padding-left' : '40px',
					'padding-top' :' 8px',
					'-webkit-border-radius' : '10px',
					'-moz-border-radius' : '10px',
					'border-radius' : '10px'
				}
			);
			
			$('#accordCont' + count).css(
				{
					'border' : 'none',
					'margin-top' : '15px'
				}
			);
			
			$('#accordCont' + count + '  p').css(
				{
					'background-color' : '#dbdbdb',
					'color' : '#000',
					'text-shadow' : '1 -1px 1px #fff',
					'font-size' : '14px',
					'cursor' : 'url(images/edit.png), pointer',
					'text-align' : 'left',
					'padding-left' : '5px'
				}
			);
			
			$('#deleteBtn' + count).css(
				{
					'position' : 'absolute',
					'top' : '0px',
					'left' : '265px',
					'cursor' : 'pointer'
				}
			);

		
		}); 
		
<!-- ------------------------------------------------------------------------------------------------- -->		

		<!-- Создаю редактор CKEDITOR -->
		CKEDITOR.replace( 'editorAccordCont');
		
		<!-- Скрываю редакторы -->
        $('#myeditor1').hide();
		$('#myeditor2').hide();
		$('#myeditor3').hide();
		/*$('#mainEditBtn').show();*/
		
		<!-- отправляю данные заголовка в редактор -->
		$('#editTitle').dblclick(function() {
		
			$('#myeditor1').show();
			var oEditor = $("div.title_val").text();
			$('#editorTitle').val(oEditor);
		
			$( "#myeditor1" ).dialog({
						height: 180,
						width: 380,
						title: 'Редактор изменения заголовка',
						modal: true,
						buttons: {
							'Сохранить': function() {
								<!-- получаю данные из редактора в заголовок -->
									$('#myeditor1').hide();
									$( "#myeditor1" ).dialog("close");
									var fromEditorHead = $('#editorTitle').val();
									$('#editTitle').html('<h3>' + fromEditorHead + '</h3>');
							}
						}
			});
		
			
		});
		
		<!-- отправляю данные подвала в редактор --> accordCont
		$('#editFooter').dblclick(function() {
		
			$('#myeditor2').show();
			$('#myeditor1').hide();
			var oEditor = $("div.footer_val").text();
			$('#editorFooter').val(oEditor);
		
			$( "#myeditor2" ).dialog({
						height: 200,
						width: 380,
						title: 'Редактор изменения копирайта',
						modal: true,
						buttons: {
							'Сохранить': function() {
								<!-- получаю данные из редактора в подвал -->
									$('#myeditor2').hide();
									$( "#myeditor2" ).dialog("close");
									var fromEditorFoot = $('#editorFooter').val();
									$('#editFooter').html('<h5>' + fromEditorFoot + '</h5>');
							}
						}
			});
		
			
		});
		
		<!-- отправляю данные контента в редактор --> 
		$(document).on('dblclick', '.accordCont_val', function(){
		
			myIndex = $(".accordCont_val").index(this);
				
				$( "#myeditor3" ).dialog({
						height: 550,
						width: 400,
						title: 'Редактор изменения контента',
						modal: true,
						buttons: {
							'Сохранить': function() {
								<!-- получаю данные из редактора в контент -->
								$('#myeditor3').hide();
								$( "#myeditor3" ).dialog("close");
								var fromEditorContTit = $('#editorAccordTit').val();
								$('#accordTit'+myIndex).html('<h3>'+ '<a>' + fromEditorContTit + '</a>' + '</h3>');
								var fromEditorContCon = CKEDITOR.instances.editorAccordCont.getData();
								$('#accordCont'+myIndex).html(fromEditorContCon);
								var custImg = $('#myImg').val();
								var sucCustImg = custImg.slice(12);
								$('#imgUp').html('<img src="images/' + sucCustImg + '">');
								
								<!-- присваиваю текущие стили отредактированным элементам -->
			
								$('#accordElem').css(
									{
										'background-color' : '#dbdbdb'
									}
								);
								
								$('#accordTit' + myIndex).css(
									{
										'height' : '30px',
										'cursor' : 'pointer'
									}
								);
								
								$('#accordTit' + myIndex + ' h3' ).css(
									{
										'color' : '#fff',
										'font-weight' : 'bold',
										'text-shadow' : '0 -1px 1px #000',
										'text-align' : 'left',
										'background-color' : '#5a91bf',
										'width' : '250px',
										'height' : '35px',
										'padding-left' : '40px',
										'padding-top' :' 8px',
										'-webkit-border-radius' : '10px',
										'-moz-border-radius' : '10px',
										'border-radius' : '10px'
									}
								);
								
								$('#accordCont' + myIndex).css(
									{
										'border' : 'none',
										'margin-top' : '15px'
									}
								);
								
								$('#accordCont' + myIndex + '  p').css(
									{
										'background-color' : '#dbdbdb',
										'color' : '#000',
										'text-shadow' : '1 -1px 1px #fff',
										'font-size' : '14px',
										'cursor' : 'url(images/edit.png), pointer',
										'text-align' : 'left',
										'width' : '250px',
										'padding-left' : '5px'
									}
								);
							}
						}
				});
				
				var oEditor = $(this).prev().text();
				var oEditor2 = $(this).text();
				$('#editorAccordTit').val(oEditor);
				CKEDITOR.instances.editorAccordCont.setData(oEditor2);
				
		});
		
<!-- ------------------------------------------------------------------------------------------------- -->		
		<!-- передвигаю элементы --> 
		
		$(function() {
			$('#accordion').sortable();
		});
		
<!-- ------------------------------------------------------------------------------------------------- -->
		
		<!-- создание домена и кода редиректа --> 
		
		$('#createDomain').click(function() {
			$('#domain').dialog("open");
		});
		
		$( "#dialog:ui-dialog" ).dialog( "destroy" );
		
		$( "#domain" ).dialog({
			autoOpen: false,
			height: 200,
			width: 460,
			title: 'Укажите имя домена Вашего мобильного сайта',
			modal: true,
			buttons: {
				'Создать': function() {
					$('#domain').dialog("close");
					<!-- вставляю код редиректа -->
					redcode = '<script type="text/javascript">' + ' ' + '<!--' + ' ' + 'if (screen.width <= 699) { document.location = "http://service2.starkuz.ru/' + name.val() + '";' + '} //' + '--' + '> ' + '<' + '/script>';
					$("#rc").val(redcode);
				}
			}
		});
		
<!-- ------------------------------------------------------------------------------------------------- -->
	
		<!-- определяю проблемные браузеры IE --> 
		
		if($.browser.msie && parseInt($.browser.version, 10) <= 8) {
			$( '#forIE' ).dialog({
				height: 200,
				width: 600,
				title: 'Вы используете устаревшую версию браузера Internet Explorer. Для более продуктивной и удобной работы с бесплатным онлайн-сервисом StarKuz Mobile настоятельно рекомендуем обновить браузер IE до версии 8 или выше на официальном сайте Майкрософт.',
				modal: true,
				buttons: {
					'Перейти на Майкрософт': function() {
						location.href = $(this).attr('data-href');
					},
					'Не обновлять': function() {
						$( '#forIE' ).dialog("close");
					}
				}
			});
		}
		
<!-- ------------------------------------------------------------------------------------------------- -->	
	});
	
</script>

</head>

<body>

	<div id="wrapper">
	
		<div id="content" class="container_12">
		
			<div id="header">
				<div class="grid_6">
					<div id="logo">
						<p>StarKuz Mobile</p>
					</div>
				</div>
				<div class="grid_6">
					<ul id="navigation">
						<li><a href="#">Админ-панель</a></li>
						<li><a href="#">Кабинет</a></li>
					</ul>
				</div>
				<div class="clear"></div>
			</div>
			
			<div class="grid_12" id="banner1">
				<img src="img/ban1.jpg" alt="">
			</div>
			<div class="clear"></div>
			
			<div class="grid_3">
				<h3 id="createDomain">Создать домен</h3>
				<div id="panel">
					<h3><a href="#">Страницы</a></h3>
					<div class="panUnit">
						<ul>
							<li><a href="#" id="page1">Главная</a></li>
						</ul>
					</div>
					
					<h3><a href="#">Элементы контента</a></h3>
					<div class="panUnit">
						<ul>
							<li id="addBtn">Складной контент</li>
						</ul>
					</div>
					
					<h3><a href="#">Варианты расцветки</a></h3>
					<div class="panUnit">
						<ul>
							<li id="firstColor">Первый вариант</li>
							<li id="secondColor">Второй вариант</li>
							<li id="thirdColor">Третий вариант</li>
							<li id="forthColor">Четвертый вариант</li>
						</ul>
					</div>
					
					<h3><a href="#">Код переадресации</a></h3>
					<div class="panUnit">
						<p>Разместите код на Вашем основном сайте между тегами &lt;head&gt;&lt;/head&gt;</p>
						<form>
							<textarea id="rc" cols="13" rows="8" name="text"></textarea>
						</form>
					</div>
					
				</div>
			</div>
			<div class="grid_5">
				<div id="smartphone">
					<div id="displayPhone">
					
						<div id="iheader1">
							<div id="editTitle" class="title_val">
							</div>
						</div>
						
						<div id="icontent1">
							<div id="accordion">
								<div id="accordElem">
									<div id="accordTit0" class="accordTit_val"> 
									</div>
									<div id="accordCont0" class="accordCont_val">
										<div id="imgUp"></div>
									</div>
									<div id="deleteElem">
									</div>
								</div>
							</div>
						</div>
						
						<div id="ifooter1">
							<div id="editFooter" class="footer_val">
							</div>
							<div id="starkuzMobile">
							</div>
						</div>
						
						<div id="domain">
							<p class="validateTips"></p>
							<form>
							<fieldset>
								<label for="name">http://starkuz.com/mobile/</label><input type="text" name="name" id="name" />
							</fieldset>
							</form>
							
						</div>
						
						<div id="myeditor1">
							<form id="form1" name="form1" method="post" action="">
								<textarea name="editorTitle" id="editorTitle" cols="35" rows="1" maxlength="16"></textarea>
							</form>
						</div>
						
						<div id="myeditor2">
							<form id="form1" name="form1" method="post" action="">
								<textarea name="editorFooter" id="editorFooter" cols="35" rows="2" maxlength="32"></textarea>
							</form>
						</div>
						
						<div id="myeditor3">
							<form id="form1" name="form1" method="post" action="">
								<textarea name="editorAccordTit" id="editorAccordTit" cols="33" rows="1" maxlength="18"></textarea>
								<textarea name="editorAccordCont" id="editorAccordCont" cols="33" rows="2" maxlength="32"></textarea>
							</form>
							<form id="formImg" method="post">
							   <p>Загрузить изображение</p>
							   <p><input type="file" name="photo" id="myImg" multiple accept="image/jpeg,image/png">
							</form>
						</div>

						<div id="forIE" data-href="http://windows.microsoft.com/ru-RU/internet-explorer/downloads/ie">
						</div>
						
					</div>
				</div>
			</div>
			<div class="grid_4">
				<img src="img/ban2.jpg" alt="">
			</div>
			<div class="clear"></div>
			
		
		</div>
		
	</div>
	
	<div id="footer">
		<p><small>&copy; 2012 StarKuz</small></p>
		<p><small>Все права защищены и принадлежат Александру Лобову и Владимиру Юсупову</small></p>
    </div>

</body>
</html>
